<template>
  <table class="mailTable" :style="styleObject" v-if="s_showByRow">
    <tr v-for="index in rowCount" :key="index">
      <td style="padding-left: 10px;">{{tableData[index].key}}</td>
      <td style="padding-bottom: 10px;">{{tableData[index].value}}</td>
    </tr>
  </table>

</template>

<script>
  export default {
    data() {
      return {
        styleObject: {},
        s_showByRow: true,
      };
    },
    props: ['tableData', 'tableStyle', 'showByRow'],
    computed: {
      rowCount: function() {
        return Math.ceil(this.tableData.length/2);
      }
    },
    created() {
      this.styleObject = this.tableStyle;
      if(this.showByRow !== undefined){
        this.s_showByRow = this.showByRow;
      }
    },
  }
</script>
